<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <%- include('./public/head.html') %>
  </head>

  <body>
    <%- include('./public/header.html') %>
    <div class="main-wrapper">
      <section class="cta-section theme-bg-light py-5">
        <div class="container text-center">
          <h2 class="heading">
            <span class="logo">shixtao.cn</span> ——— 一个前端爱好者的博客
          </h2>
          <div class="intro">欢迎您的访问！期待您留下宝贵的意见</div>
          <form class="signup-form form-inline justify-content-center pt-3">
            <div class="form-group" style="margin: 0;">
              <input
                type="search"
                name="search"
                class="form-control mr-md-1"
                placeholder="输入您想搜索的文章"
                required
              />
            </div>
            <button class="btn btn-primary">搜索</button>
          </form>
        </div>
      </section>
      <section class="blog-list px-3 py-5 p-md-5">
        <div class="container">
          <% for(let data of blogs){ %>
          <div class="item mb-5">
            <div class="media">
              <img
                class="mr-3 img-fluid post-thumb d-none d-md-flex"
                src="<%= data.img %>"
                alt="博客封面图"
              />
              <div class="media-body">
                <h2 class="title mb-1">
                  <a href="/article/<%= data.id %>">
                    <% if(data.top === 1) { %>
                    <i class="iconfont icon-zhiding"></i>&nbsp;
                    <% } %>
                    <%= data.title %></a>
                </h2>
                <div class="meta mb-1">
                  <i class="iconfont icon-bokeyuan"></i>
                  <span
                    ><%= data.type %>&nbsp;
                    <span>
                      <a class="text-info" href="/list?cid=<%= data.cid %>" title="博客类型">
                        <% for(let list of lists){ %> <% if(data.cid === list.id){
                        %> <%= list.name %> <% } %> <% } %>
                      </a>
                    </span>
                  </span>
                  <i class="iconfont icon-shizhong"></i>
                  <span title="发表时间"><%= data.time %></span>
                  <i class="iconfont icon-renyuan"></i>
                  <span title="博客作者"><%= data.author %></span>
                  <i class="iconfont icon-pinglun"></i>
                  <span title="评论"
                    ><a href="/article/<%= data.id %>#form"
                      ><%= data.comment %> 评论</a
                    ></span
                  >
                  <i class="iconfont icon-liulan"></i>
                  <span title="浏览量"><%= data.click %></span>
                </div>
                <div class="intro"><%= data.description %></div>
                <a class="more-link" href="/article/<%= data.id %>"
                  >更多内容 &rarr;</a
                >
              </div>
            </div>
          </div>
          <% } %>
          <!-- 分页 -->
          <% if(totalPage > 1 && !search) { %>
          <nav class="blog-nav nav my-5">
            <% for(let i = 1; i<= totalPage; i++) { %>
            <a class="pageBtn <%= +i === +currentPage ? 'currentBtn' : '' %>" href="/?page=<%= i %>"
              ><%= i %></a>
            <% } %>
          </nav>
          <% } %>
        </div>
      </section>
      <%- include('./public/footer.html') %>
    </div>
    <%- include('./public/color.html') %>
    <%- include('./public/script.html') %>
  </body>
</html>
